<template>
  <div class="wrapper">
  
      <div class="title">我的订单</div>
   
        <div class="card" v-for="(item,index) in list" :key="index">
            <div class="cardTop">
                <span class="cardName">{{item.cardName}}</span>
                <span v-bind:class="item.cardState==='已完成'?'green':'cardState'">{{item.cardState}}</span>
            </div>
            <div class="cardBottom">
                <div class="cardImg">
                    <div class="img-wrapper"  v-for="(cardImg,index) in item.cardImg" :key="index" v-show="index<4">
                      <img class="cardImg1" :src="item.cardImg[index]">
                    </div>
                </div>
                <div class="cardNumber">
                    <span class="cardMonney">￥{{item.cardMonney}}</span>
                    <span class="cardTotal">共{{item.cardTotal}}件</span>
                </div>
            </div>
        </div>
  
  </div>
  <div></div>
</template>

<script>
import {mapState} from 'vuex'
  export default{
    data(){
      return {
        
      }
    },
    computed:{
      ...mapState(['list'])
    }
  }
</script>

<style lang="scss" scoped>
  .wrapper{
    min-height:100vh;
    background-color:#f1f1ee;
    width:100vw;
  }
    .title{
      padding: 3vw;
      font-size: 6.5vw;
      font-weight: 350;
      background:white;
      text-align:center;
      margin-bottom: 3vw;
    }
      .card{
        width: 92vw;
        margin:0 auto;
        background: white;
        border-radius: 1.5vw;
        margin-bottom:3vw;
        .cardTop{
          display:flex; 
          justify-content: space-between;
          padding: 3vw;
          .cardName{
            font-size:5vw;
          }
          .cardState{
            font-size:4vw;
            color:#666666;
          }
          .green{
              font-size:4vw;
              color:#24d224;
          }
        }
        .cardBottom{
          display:flex;
          justify-content: space-between;
          padding: 1vw 3vw 3vw 3vw;
         
          .cardImg{ 
            display:flex;
            .cardImg1{
              width:12vw;
              height:12vw;
              margin-right:2vw;
              border-radius:50%;
            }
          }
          .cardNumber{
            display:flex;
            flex-direction:column;
            .cardMonney{
              color:red;
            }
            .cardTotal{
              text-align: right;
              font-size: 3.5vw;
            }
          }
        }
      }
</style>

